<template>
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    class="dialogStyleMiddle"
  >
    <div style="text-align:left">
      <el-form ref="addSysMenuForm" :model="sysmenu" :rules="rules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="上级菜单" prop="parentId">
              <treeselect
                v-model="sysmenu.parentId"
                :options="menuOptions"
                :show-count="true"
                size="medium"
                placeholder="选择上级菜单"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="sysmenu.menuType" clearable>
                <el-radio
                  v-for="dict in menuTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                  size="medium"
                > {{ dict.dictLabel }} </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input
                v-model="sysmenu.menuName"
                prefix-icon="el-icon-edit"
                placeholder="请输入菜单名称"
                clearable
                size="medium"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示顺序" prop="orderNum">
              <el-input-number
                v-model="sysmenu.orderNum"
                controls-position="right"
                style="width:100%;"
                :min="1"
                clearable
                size="medium"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="sysmenu.menuType != 'F'" label="菜单图标" prop="icon">
              <el-popover
                placement="bottom-start"
                width="490"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="sysmenu.icon" placeholder="点击选择图标" readonly>
                  <svg-icon
                    v-if="sysmenu.icon"
                    slot="prefix"
                    :icon-class="sysmenu.icon"
                    :class-name="sysmenu.icon"
                    class="el-input__icon"
                    size="medium"
                    style="height: 32px;width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="sysmenu.menuType!='F'" label="组件路径" prop="url">
              <el-input
                v-model="sysmenu.url"
                prefix-icon="el-icon-edit"
                placeholder="请输入组件路径"
                clearable
                size="medium"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="sysmenu.menuType == 'C'" :span="12">
            <el-form-item label="路由地址" prop="component">
              <el-input
                v-model="sysmenu.component"
                placeholder="请输入路由地址"
                clearable
                size="medium"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="sysmenu.menuType != 'M'" :span="12">
            <el-form-item label="权限标识" prop="perms">
              <el-input
                v-model="sysmenu.perms"
                size="medium"
                prefix-icon="el-icon-edit"
                placeholder="请输入权限标识"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col v-if="sysmenu.menuType == 'C'" :span="12">
            <el-form-item label="实体名称" prop="dataObjType">
              <el-input
                v-model="sysmenu.dataObjType"
                size="medium"
                prefix-icon="el-icon-edit"
                placeholder="请输入该表实体类名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" type="primary" @click="submitForm('addSysMenuForm')">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 菜单下拉树用的的方法和样式
import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// 图片选择'
import IconSelect from '@/components/IconSelect'
import { addMenu, updateMenu, getMenuByMenuId, checkMenuNameUnique, checkMenuUrlUnique, selectTreeMenu } from '@/api/system-tool/menu'
export default {
  name: 'AddDialog',
  components: { treeselect, IconSelect },
  props: {
    menuTypeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const checkMenuName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空'))
      } else {
        const menuId = this.sysmenu.menuId
        const parentId = this.sysmenu.parentId
        const menuName = value
        checkMenuNameUnique(
          menuId,
          parentId,
          menuName
        ).then(response => {
          if (response.data === '1') {
            return callback(new Error('该菜单已经存在'))
          } else {
            callback()
          }
        })
      }
    }
    const checkMenuUrl = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空'))
      } else {
        const menuIds = this.sysmenu.menuId
        const parentIds = this.sysmenu.parentId
        const url = value
        checkMenuUrlUnique(
          menuIds,
          parentIds,
          url
        ).then(response => {
          if (response.data === '1') {
            return callback(new Error('url已经存在'))
          } else {
            callback()
          }
        })
      }
    }
    return {
      // 菜单树
      menuOptions: [],
      // 弹出的对话框的标题
      dialogTitle: '',
      // 对话框是否弹出显示
      dialogVisible: false,
      // 添加字段定义
      sysmenu: {
        menuId: '',
        parentId: null,
        menuType: 'M',
        icon: '',
        menuName: '',
        orderNum: '',
        url: '',
        component: '',
        perms: '',
        visible: '0',
        dataObjType: ''
      },
      rules: {
        menuName: [
          { required: true, validator: checkMenuName, trigger: 'blur' }
        ],
        url: [
          { required: true, validator: checkMenuUrl, trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '必填:顺序必须填写', trigger: 'blur' }
        ],
        perms: [
          { required: true, message: '必填:必填', trigger: 'blur' }
        ],
        dataObjType: [
          { required: true, message: '必填:必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAdd(title, menuId, parent) {
      this.dialogTitle = title
      this.dialogVisible = true
      if (menuId) {
        this.getDetailById(menuId)
      } else {
        this.sysmenu.parent = parent
      }
      this.getMenuTree()
    },
    getDetailById(menuId) {
      getMenuByMenuId(menuId).then(resp => {
        if (resp) {
          const {
            menuId, parentId, menuType, icon, menuName, dataObjType,
            orderNum, url, component, perms, visible
          } = resp.data
          this.sysmenu = {
            ...this.sysmenu, orderNum, url, component, perms, visible,
            menuId, parentId, menuType, icon, menuName, dataObjType
          }

          if (parentId === '0') {
            this.sysmenu.parentId = null
          }
        }
      })
        .catch(() => {
        })
    },
    // 添加弹框取消
    cancel() {
      this.dialogVisible = false
      this.sysmenu.visible = '0'
      this.sysmenu.menuId = ''
      this.resetForm('addSysMenuForm')
    },
    // 添加/编辑页面确定按钮
    submitForm(fromData) {
      this.$refs[fromData].validate(valid => {
        if (valid) {
          const menuId = this.sysmenu.menuId
          if (this.sysmenu.parentId === undefined) {
            this.sysmenu.parentId = '0'
          }
          if (menuId) {
            // 更新
            // let sysmenu = this.sysmenu
            updateMenu(this.sysmenu).then(resp => {
              if (resp) {
                this.msgSuccess('修改成功!')
                this.cancel()
                this.$parent.getList()
              }
            })
          } else {
            // 添加
            addMenu(this.sysmenu).then(resp => {
              if (resp) {
                this.msgSuccess('新增成功!')
                this.cancel()
                this.$parent.getList()
              }
            })
          }
        }
      })
    },
    // 查询菜单下拉树结构
    getMenuTree() {
      selectTreeMenu().then(resp => {
        if (resp) {
          this.menuOptions = resp.data
        }
      })
    },
    selected(name) {
      this.sysmenu.icon = name
    }
  }
}
</script>

